<template>
  <div class="wrapper">
    <common-header :content="classifyTitle"></common-header>
    <van-loading class="v-loading"
                 size="30px"
                 color="white"
                 v-show="!showList" />
    <div class="container"
         v-if="showList">
      <classify-nav class="classify-nav"
                    :nav="classify.nav"
                    :currentIndex="currentIndex"
                    @changeIndex="handleChangeNavIndex"></classify-nav>
      <classify-content class="classify-content"
                        :content=classify.content
                        @changeIndex="handleChangeContentIndex"
                        :navCurrentIndex="navCurrentIndex"></classify-content>
    </div>
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
    <tab-bar></tab-bar>
  </div>
</template>

<script>
// @ is an alias to /src
import tabBar from 'common/tab/tab'
import ClassifyNav from './components/nav'
import ClassifyContent from './components/content'
import CommonHeader from 'common/header/header'
export default {
  name: 'classify',
  components: {
    tabBar,
    ClassifyNav,
    ClassifyContent,
    CommonHeader
  },
  created () {
    this.getAll()
  },
  data () {
    return {
      classifyTitle: '商品分类',
      category: [],
      currentIndex: 0,
      navCurrentIndex: 0
    }
  },
  computed: {
    classify () {
      const nav = []
      const content = []
      this.category.map((item) => {
        nav.push({
          title: item.cate_name,
          id: item.id
        })
        content.push({
          id: item.id,
          title: item.cate_name,
          list: item.child
        })
      })
      return {
        nav,
        content
      }
    },
    showList () {
      return this.category.length
    }
  },
  methods: {
    getAll () {
      this.$api.classify.all()
        .then(this.getAllSucc)
        .catch((e) => {
          this.$errorTip()
        })
    },
    getAllSucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK && res.data) {
        const data = res.data
        this.category = data.category
      }
    },
    handleChangeContentIndex (i) {
      this.currentIndex = i
    },
    handleChangeNavIndex (i) {
      this.navCurrentIndex = i
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.wrapper
  initPosition()

  .container
    display flex
    width 100%

    .classify-nav
      width 200px
      position absolute
      top 98px
      left 0
      overflow-y scroll
      overflow-x hidden
      height calc(100vh - 110px - 88px - 20px)

.v-loading
  position fixed
  top 50%
  left 50%
  transform translate(-50%, -50%)
  z-index 100
  padding-left 10px
  padding-right 10px
  padding-top 10px
  padding-bottom 10px
  border-radius 3px
  background-color rgba(0, 0, 0, 0.5)
</style>
